import React, { Component } from 'react'

import './index.css'

export default class Item extends Component {

    state = {mouse: false}
    // 鼠标离开页面
    handleMouseLeave = (flag)=>{
        return ()=>{
            // console.log(flag);
            this.setState({ mouse:flag })
        }
    };
    // 鼠标进入页面
    handleMouseEnter = (flag)=> {
        return ()=>{
            
            this.setState({ mouse:flag })
        }
    };
    // 是否完成
    handleChecked = (id)=>{
        return (event)=>{
            // console.log(id,event.target.checked);
            this.props.changeTodo(id,event.target.checked)
        }
    }

    // 删除一个todo的回调
    handleDelete = (id)=> {
        return ()=>{
            // 小小坑
            if(window.confirm('你确定要删除吗？')){
                this.props.deleteTodo(id);
            }
        }
    }
    render() {
        const { id,name, done } = this.props;
        const { mouse } = this.state;
        return (
            <li style = {{backgroundColor:mouse? '#ddd' : '#fff'}} onMouseLeave= {this.handleMouseLeave(false)} 
            onMouseEnter = {this.handleMouseEnter(true)}>
            <label>
            <input type="checkbox"  checked = {done} onChange = {this.handleChecked(id)}/>
            <span>{name}</span>
            </label>
            <button onClick={this.handleDelete(id)} className="btn btn-danger" style={{display:mouse?'block':"none"}}>删除</button>
        </li>
        )
    }
}
